Messing around with image borders

rpg-docs/client/views/character/bigAbilities/bigAbilities.css

@@ -0,0 +1,22 @@
+.floatBox.ability {
+	width: 85px;
+	text-align: center;
+	display: inline-block;
+}
+
+.abilityName {
+	
+}
+
+.abilityScore {
+	font-size: 2em;
+}
+
+.abilityMod {
+	margin: 0 auto -15px;
+	padding: 2px;
+	border: 2px solid black;
+	border-radius: 5px;
+	background: white;
+	width: 40px;
+}

rpg-docs/client/views/character/bigAbilities/bigAbilities.html

@@ -1,4 +1,4 @@
-<template name = "abilities">
+<template name = "bigAbilities">
 	<div class="ability floatBox">
 		<div class ="abilityName">
 			Strength

rpg-docs/client/views/character/character.css

@@ -12,11 +12,20 @@
 
 /*Float boxes are indivisble, have shadows*/
 .floatBox{
-	border: 2px solid black;
-	border-radius: 0px 0px 10px 10px;
-	padding: 5px;
-	margin: 5px;
+	border-image-width: 90px 54px 50px 54px;
+	border-image-outset: 10px;
+	border-image-source: url('/png/big-border.png');
+	border-image-slice: 271 163 151 163;
+	border-image-repeat: stretch;
+	
+	padding: 5px 10px 5px 10px;
+	margin: 10px;
 	background: white;
+	border-radius: 20px;
+}
+
+.bigborder{
+	
 }
 
 /* headings in floatboxes */
@@ -24,7 +33,6 @@
 	background: black;
 	color: white;
 	font-size: 1em;
-	margin: 0px -5px 0px -5px;
 	padding: 2px 15px;
 }
 
@@ -33,35 +41,9 @@
 }
 
 .floatBox.rounded {
-	border-radius: 10px;
-	display: inline-block;
-	text-align: center;
-}
-
-/* Ability scores */
-.floatBox.ability {
-	border-radius: 10px;
-	width: 85px;
-	text-align: center;
-	margin: 5px 5px 20px 5px;
-	display: inline-block;
-}
-
-.abilityName {
 	
-}
-
-.abilityScore {
-	font-size: 2em;
-}
-
-.abilityMod {
-	margin: 0 auto -15px;
-	padding: 2px;
-	border: 2px solid black;
-	border-radius: 5px;
-	background: white;
-	width: 40px;
+	display: inline-block;
+	text-align: center;
 }
 
 /* Stats */

rpg-docs/client/views/character/character.html

@@ -4,7 +4,7 @@
 	</div>
 	<div class="flexContainer">
 		<div id="abilityScores" class="flexItem">
-			{{> abilities}}
+			{{> bigAbilities}}
 		</div>
 		<div class="flexItem">
 			<div>

rpg-docs/client/views/character/healthBar/healthBar.css

@@ -15,31 +15,35 @@
 
 .healthBarGreen{
 	position: absolute;
-	height: 30px;
+	top: 2px;
+	height: 26px;
 	border-radius: 15px;
-	background-color: green;
+	background-color: #008C00;
 }
 
 .healthBarRed{
 	position: absolute;
-	height: 30px;
+	top: 2px;
+	height: 26px;
 	border-radius: 15px;
-	background-color: red;
+	background-color: #AF0000;
 }
 
 .healthBarYellow{
 	position: absolute;
-	height: 30px;
+	top: 2px;
+	height: 26px;
 	border-radius: 15px;
-	background-color: yellow;
+	background-color: #AF6700;
 }
 
 .healthBarBorder{
 	position: absolute;
-	height: 2px;
-	border-width: 14px 40px 14px 40px;
-	width: 160px;
-	border-image: url('/png/bar-border.png') 14 40 14 40;
+	left: -1px;
+	height: 0px;
+	border-width: 15px 40px 15px 40px;
+	width: 222px;
+	border-image: url('/png/bar-border.png') 44 120 49 119 stretch;
 	
 	display: flex;
 	justify-content: center; /* align horizontal */

rpg-docs/client/views/character/healthBar/healthBar.html

@@ -3,7 +3,7 @@
 			
 		</div>
 	<div class="healthBarContainer">
-		<button class="healthBarMinus healthBarButton"></button>
+		<!--<button class="healthBarMinus healthBarButton"></button>-->
 		<div class= "healthBar">
 			<div class="deltaHp" style="left:{{hpPercentDelta}}%">
 				<button id="applyDelta" style="display: {{showDelta}}">{{deltaHp}}</button>
@@ -15,6 +15,6 @@
 				<span class="hpReadout">{{attributeValue attributes.hitPoints}}/{{maxHp}}</span>
 			</div>
 		</div>
-		<button class="healthBarPlus healthBarButton"></button>
+		<!--<button class="healthBarPlus healthBarButton"></button>-->
 	</div>
 </template>

rpg-docs/client/views/character/healthBar/healthBar.js

@@ -64,7 +64,7 @@ Template.healthBar.events({
 	},
 	"drag": function(event, templateInstance, handler){
 		//the width of the bar, fetch dynamically if needed
-		var healthBarWidth = 240;
+		var healthBarWidth = 300;
 		var hpLeft = this.attributeValue(this.attributes.hitPoints)
 		var damage = this.attributes.hitPoints.base
 		var maxHp = hpLeft - damage;

rpg-docs/client/views/colors/colors.less

@@ -0,0 +1,67 @@
+/* LESS - http://lesscss.org style sheet */
+/* Palette color codes */
+/* Palette URL: http://paletton.com/#uid=70b0u0kw0aqkOe4l1FfXbp18V3P */
+
+/* Feel free to copy&paste color codes to your application */
+
+
+/* MIXINS */
+
+/* As hex codes */
+
+@color-primary-0: #531300;	/* Main Primary color */
+@color-primary-1: #703827;
+@color-primary-2: #FF7D58;
+@color-primary-3: #C72D00;
+@color-primary-4: #1E1816;
+
+@color-secondary-1-0: #532D00;	/* Main Secondary color (1) */
+@color-secondary-1-1: #704F27;
+@color-secondary-1-2: #FFB358;
+@color-secondary-1-3: #C76C00;
+@color-secondary-1-4: #1E1B16;
+
+@color-secondary-2-0: #032335;	/* Main Secondary color (2) */
+@color-secondary-2-1: #1B3847;
+@color-secondary-2-2: #4896C0;
+@color-secondary-2-3: #01537F;
+@color-secondary-2-4: #0E1213;
+
+@color-complement-0: #003B1B;	/* Main Complement color */
+@color-complement-1: #1C4F34;
+@color-complement-2: #46CC84;
+@color-complement-3: #008D41;
+@color-complement-4: #101512;
+
+
+
+/* As RGBa codes */
+
+@rgba-primary-0: rgba( 83, 19,  0,1);	/* Main Primary color */
+@rgba-primary-1: rgba(112, 56, 39,1);
+@rgba-primary-2: rgba(255,125, 88,1);
+@rgba-primary-3: rgba(199, 45,  0,1);
+@rgba-primary-4: rgba( 30, 24, 22,1);
+
+@rgba-secondary-1-0: rgba( 83, 45,  0,1);	/* Main Secondary color (1) */
+@rgba-secondary-1-1: rgba(112, 79, 39,1);
+@rgba-secondary-1-2: rgba(255,179, 88,1);
+@rgba-secondary-1-3: rgba(199,108,  0,1);
+@rgba-secondary-1-4: rgba( 30, 27, 22,1);
+
+@rgba-secondary-2-0: rgba(  3, 35, 53,1);	/* Main Secondary color (2) */
+@rgba-secondary-2-1: rgba( 27, 56, 71,1);
+@rgba-secondary-2-2: rgba( 72,150,192,1);
+@rgba-secondary-2-3: rgba(  1, 83,127,1);
+@rgba-secondary-2-4: rgba( 14, 18, 19,1);
+
+@rgba-complement-0: rgba(  0, 59, 27,1);	/* Main Complement color */
+@rgba-complement-1: rgba( 28, 79, 52,1);
+@rgba-complement-2: rgba( 70,204,132,1);
+@rgba-complement-3: rgba(  0,141, 65,1);
+@rgba-complement-4: rgba( 16, 21, 18,1);
+
+
+
+/* Generated by Paletton.com © 2002-2014 */
+/* http://paletton.com */